<?php
//	require_once('FirePHPCore/FirePHP.class.php');
//	$firephp = FirePHP::getInstance(true);
//	
//	require_once get_template_directory() . '/facebook.php';
//	$facebook = new Facebook(array(
//			'appId'  => '177050399083501',
//			'secret' => '3e138d13e6f28516b1e5fdbc382b4521',
//	));
//	
//	$pageFeed = $facebook->api('seolabkorea' . '/feed');
//	$firephp->log($pageFeed, "Iterators");
//	
//	function get_fb_feed($num, $type) {
//		global $pageFeed, $firephp;
//		return $pageFeed[data][$num][$type];
//	}
?>
<?php get_header(); ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jcarousellite_1.0.1.js"></script>
		<div id="container">
			<!-- img slide -->
			<div style="background-color: #000;">
				<div id="slideShowImg" style="margin: 0px auto; width: 1024px; height: 160px;">
					<div id="slideImgShowContainer">
						<ul id="slide">
							<li>
								<img src="/images/contents/service/SEO.jpg" width="1024px;">
								<div class="caption">
									<span class="captionBigBold">Search Engine Optimization</span>
									<span class="captionSmallBold">Artience는 획일된 SEO를 적용하지 않습니다. <br>저희는 SEO를 연구하고 컨설팅 합니다.</span>
								</div>
							</li>
							<li>
								<img src="/images/contents/service/PPC.jpg" width="1024px;">
								<div class="caption">
									<span class="captionBigBold">PPC</span>
									<span class="captionSmallBold">Artience는 광고 대행을 하지 않습니다. 광고 최적화를 합니다.</span>
								</div>
							</li>
							<li>
								<img src="/images/contents/service/SMM.jpg" width="1024px;">
								<div class="caption">
									<span class="captionBigBold">SMM</span>
									<span class="captionSmallBold">남들도 하는 소셜미디어가 아닙니다. 소셜미디어의 주인공으로 만들어 드립니다.</span>
								</div>
							</li>
							<li>
								<img src="/images/contents/service/MOBILE.jpg" width="1024px;">
								<div class="caption">
									<span class="captionBigBold">Mobile</span>
									<span class="captionSmallBold">Mobile은 더 이상 Option이 아닙니다. Mobile은 이제 Main입니다.</span>
								</div>
							</li>
							<li>
								<img src="/images/contents/service/ONLINE.jpg" width="1024px;">
								<div class="caption">
									<span class="captionBigBold">Online News PR</span>
									<span class="captionSmallBold">Artience의 해외 온라인 기사배포 서비스는 검색엔진 기사 최적화(SEO)가 적용됩니다. </span>
								</div>
							</li>
						</ul>
					</div><!-- slideImgShowContainer -->
				</div><!-- slideShowImg -->
			</div><!-- img slide -->

			<div id="content" role="main" style="padding: 0; margin-top: 0; margin-bottom: 0;">
				<div id="homeView" class="box">
					<section id="philosophy" style="position: relative;">
						<h2>Artience Pholosophy</h2>
						<div style="text-align: center; margin-top: 25px;">
							<div style="font-size: 18px; color: #A0A0A0; font-weight: bold; margin-bottom: 40px;">아티언스는 단순히 검색 마케팅 회사가 아닙니다.</p>
							<div style="font-size: 18px; font-weight: bold; margin-top: 20px; background: url('/images/contents/quot-open.png') no-repeat 300px 0;">
								<div style="background: url('/images/contents/quot-close.png') no-repeat 630px 5px;">
									아티언스는 <span style="color: red;">가치의 완성</span> 입니다.
								</div>
							<div style="font-size: 18px; margin-top: 20px;">The only one agency to complete your true value.</div>
						</div>
					</section>
					<section id="services" style="height: 350px;">
						<h2>Artience Service</h2>
						<article>
							<ul>
								<li style="margin-right: 30px;">
									<img src="/images/contents/service/service-seo.png" height="90">
									<h3>SEO</h3>
									<div style="font-size: 83%; height: 100px; word-wrap:break-word;word-break:break-all;overflow-x:auto;overflow-y:hidden;">
										검색엔진 최적화(SEO: Search Engine Optimization)는 사이트의 내/외부적 현황과 환경 분석 후 분석 결과에 따라 각 사이트 현황(상태)에 적합한 최적화 작업을 통하여 검색엔진 친화적 사이트를 구축하는 것을 의미합니다. 검색엔진에 최적화 된 사이트는 인터넷 유저가 사이트와 관련 있는 키워드로 검색 시, 관련 페이지로 인식되어 웹 검색 결과 영역에서 상위 노출 될 기회가 높아집니다
									</div>
									<!-- span style="text-align: center; background-color: #DDDDDD;">Read more +</span> -->
									<div class="readMore" style="text-align: center;">
										<a class="service aero" href="service/seo"><span>Read More +</span></a>
									</div>
								</li>
								<li style="margin-right: 30px;">
									<img src="/images/contents/service/service-ppc.png" height="90">
									<h3>PPC</h3>
									<div style="font-size: 83%; height: 100px; word-wrap:break-word;word-break:break-all;overflow-x:auto;overflow-y:hidden;">
										Google, Yahoo, Bing과 같이 온라인에서 가장 많은 사람들이 이용하는 검색엔진을 통해 광고를 노출하여 Traffic을 유입하는 광고입니다. 일반적으로 검색결과의 상단이나 우측에 광고가 노출되며, 클릭당 과금이 부과되는 방식입니다.
									</div>
									<div class="readMore" style="text-align: center;">
										<a class="service aero" href="service/service/ppc"><span>Read More +</span></a>
									</div>
								</li>
								<li style="margin-right: 30px;">
									<img src="/images/contents/service/service-mobile.png" height="90">
									<h3>Mobile</h3>
									<div style="font-size: 83%; height: 100px; word-wrap:break-word;word-break:break-all;overflow-x:auto;overflow-y:hidden;">
										Mobile Search Marketing은 스마트폰, Tablet과 같은 모바일 기기를 통한 검색엔진 최적화 및 광고를 말합니다. 전 세계적으로 스마트폰 사용자가 급속히 증가하면서 단지 사용자 수가 많은 것 뿐만 아니라, Mobile에서 보여줄 수 있는 컨텐츠의 다양성과 사용자의 활용도 측면에서 보더라도 모바일은 중요한 마케팅 채널이 되었습니다.
									</div>
									<div class="readMore" style="text-align: center;">
										<a class="service aero" href="service/service/mobile"><span>Read More +</span></a>
									</div>
								</li>
								<li style="margin-right: 30px;">
									<img src="/images/contents/service/service-socialmedia.png" height="90">
									<h3>Social Media</h3>
									<div style="font-size: 83%; height: 100px; word-wrap:break-word;word-break:break-all;overflow-x:auto;overflow-y:hidden;">
										Facebook, Twitter, LinkedIn과 같이 가장 많은 사람들이 사용하는 소셜 네트워크 사이트를 통해서 image, text와 같은 광고를 노출시키는 것을 소셜미디어 광고라고 합니다. 검색엔진의 키워드광고와 달리 소셜미디어 광고는 사용자의 나이, 성별과 같은 Demographic 정보와 취미와 관심사 정보를 기반으로 좀 더 세밀한 광고 target을 정할 수 있고, 그러한 target을 대상으로 지속적으로 광고를 노출시킬 수 있는 장점이 있습니다.
									</div>
									<div class="readMore" style="text-align: center;">
										<a class="service aero" href="service/service/social-media"><span>Read More +</span></a>
									</div>
								</li>
								<li>
									<img src="/images/contents/service/service-news.png" height="90">
									<h3>Online News PR</h3>
									<div style="font-size: 83%; height: 100px; word-wrap:break-word;word-break:break-all;overflow-x:auto;overflow-y:hidden;">
										기업의 제품 및 브랜드를 홍보하는 기사를 신속하고 정확하게 MSNBC, CNet, AP Digital 등 전 세계 유명 뉴스매체에 배포하는 것을 의미합니다.인터넷 사용자의 87.5% 이상이 정보/뉴스 검색을 위해 인터넷을 사용 할 정도로 온라인을 통한 뉴스검색 활동은 활발하게 전개되고 있습니다. 그렇기 때문에, 기업의 홍보전략 상 Online News PR을 통한 제품 및 기업정보의 홍보는 필수적인 요소 중 하나가 되었습니다.
									</div>
									<div class="readMore" style="text-align: center;">
										<a class="service aero" href="service/service/online-news-pr"><span>Read More +</span></a>
									</div>
								</li>
							</ul>
						</article>
					</section>
					<div style="position: relative;">
						<!-- section id="facebook" style="width: 50%; ">
							<h2>facebook</h2>
							<article style="float: left;">
								<div style=""><?php echo (get_fb_feed(0, 'message'));?></div>
								<div class="fb_timeline" style="list-style: none outside none; border: 1px solid #DDDDDD;  position: relative;">
									<a href="<?php echo (get_fb_feed(0, 'link')); ?>">
										<span><img src="<?php echo (get_fb_feed(0, 'picture')); ?>"></span>
										<div style="border-left: 1px solid #DDDDDD; position: absolute; top: 0; left: 70px;">
											<div>
												<div style=""><?php echo (get_fb_feed(0, 'name')); ?></div>
												<div style=""><?php echo (get_fb_feed(0, 'description')); ?></div>
												<div></div>
												<div class="fb-like" data-href="http://artience.co.kr" data-send="true" data-layout="button_count" data-width="125" data-show-faces="false" style="float: right;">
												</div>
											</div>
										</div>
									</a>
								</div>
							</article>
						</section -->
						<!-- section id="blogRecent" style="width: 50%; position: absolute; top: 0; right: 0;">
							<h2>Blog Recent</h2>
							<article id="recentBlog">
								<ul>
									<?php while (have_posts()) : the_post(); ?>
							        	<li>
							        		<a href="<?php the_permalink(); ?>">
							        			<div>
									          		<img src="<?php echo catch_that_image() ?>" width="100px" height="100px">
									          		<span>
									          			<?php the_title(); ?>
									          			<?php the_content(); ?><br>
										          		<?php the_content_no_imgs(); ?>
										          		<?php the_author();?>
										          		<?php the_time(get_option('date_format')); ?><?php the_time(); ?>
									          		</span>
								          		</div> 
								          	</a> 
							          	</li>
							        <?php endwhile; ?>
						        </ul>
							</article>
						</section -->
					</div>
				</div><!--  .box -->
				<div id="colophon"> </div>
				<div id="homeView" class="box">
					<section id="clients" style="margin: 0;">
						<h2>Clients</h2>
						<article class="clientList" style="position: relative; height: 60px; margin-top: 30px; margin-bottom: 0px; overflow-x: hidden; padding-top: 20px;">
						
							<input id="client-prev" class="prev" type="image" src="/images/contents/prev.png" style="float: left; border: 0px;">
						    <ul class="clientSlide" style="">
						    	
						    	<li>
						    		<div style="position: absolute; margin: 0 5px; width: 150px; top: -3px; text-align: center;">
						    			<img src="/images/contents/lg-cns.png" alt="">
						    		</div>
						    	</li>
						    	<li>
						    		<div style="position: absolute; margin: 0 5px; width: 150px; text-align: center;">
							        	<img src="/images/contents/lge.png" alt="">
						    		</div>
						    	</li>
						    	<li>
						    		<div style="position: absolute; margin: 0 5px; width: 150px; text-align: center;">
						  	      <img src="/images/contents/samsung.png" alt="">
						    		</div>
						    	</li>
						    	<li>
						    		<div style="position: absolute; margin: 0 5px; width: 150px;  top: -20px;text-align: center;">
						    	    <img src="/images/contents/sto.png" alt="">
						    		</div>
						    	</li>
						    	<li>
						    		<div style="position: absolute; margin: 0 5px; width: 150px;top: -3px;  text-align: center;">
							        <img src="/images/contents/mke.png" alt="">
						    		</div>
						    	</li>
						    </ul>
							<input id="client-next" class="next"  type="image" src="/images/contents/next.png" border="0" style="float: right;">
						</article>
					</section>
				</div>
				
			</div><!-- #content -->
		</div><!-- #container -->

<script type="text/javascript">
//<![CDATA[
           
    // clients rolling
    $(function () {
        $('.clientList').each(function() {
	
            var spacing = 170;
			var TmSpeed = 1000;
	
		    $(this).children('ul.clientSlide').css({
		        // 'position' : 'relative',
				overflow-x' : 'hidden'
				).children('li').css({
					'position' : 'absolute',
					// 'top' : '0',
					//'left' : '-150px'
				});
	
				$('.clientSlide').children('li').eq(0).css('left', 0 + 60);
				$('.clientSlide').children('li').eq(1).css('left', spacing + 60);
				$('.clientSlide').children('li').eq(2).css('left', spacing * 2 + 60);
				$('.clientSlide').children('li').eq(3).css('left', spacing * 3 + 60);
				$('.clientSlide').children('li').eq(4).css('left', spacing * 4 + 60);
				//$('.clientSlide').children('li').eq(5).css('left', spacing * 5);
				// $('.clientSlide').children('li').eq(6).css('left', spacing * 6);
				/* //default */
	
				var slideInProgress = false;
				var iconSlide = function() {
					var jQueryLis = $('.clientSlide').children('li');
					$('.clientList').children('input').unbind('click');
	
					$('.clientList').children('input.prev').click(function(event) {
						if (!slideInProgress)	{
							slideInProgress = true;
		
							// jQueryLis.eq(0).css('left', 0).animate({'left':-spacing}, 'slow', function() {
							jQueryLis.eq(0).css('left', 0).animate({'left':spacing * 4 + 60}, 'slow', function() {
								$(this).appendTo('.clientList ul');
								//iconSlide(); // 자신을 다시 호출
								slideInProgress = false;
							});
							jQueryLis.eq(1).css('left', spacing).animate({'left':0 + 60}, 'slow');
							jQueryLis.eq(2).css('left', spacing * 2).animate({'left':spacing + 60}, 'slow');
							jQueryLis.eq(3).css('left', spacing * 3).animate({'left':spacing * 2 + 60}, 'slow');
							jQueryLis.eq(4).css('left', spacing * 4).animate({'left':spacing * 3 + 60}, 'slow');
							jQueryLis.eq(5).css('left', spacing * 5).animate({'left':spacing * 4 + 60}, 'slow');
							//jQueryLis.eq(6).css('left', spacing * 6).animate({'left':spacing * 5}, 'slow');
							//jQueryLis.eq(7).css('left', spacing * 7).animate({'left':spacing * 6}, 'slow');
							//jQueryLis.eq(jQueryLis.length - 1).css('left', spacing * 9).animate({'left':spacing * 8}, 'slow');
							event.preventDefault();
						}
					});
	
					$('.clientList').children('input.next').click(function(event) {
						if (!slideInProgress)	{
							slideInProgress = true;
	
							// jQueryLis.eq(jQueryLis.length - 1).css('left', -spacing).animate({'left':0}, 'slow', function() {
							// jQueryLis.eq(jQueryLis.length - 1).css('left', 30).animate({'left':spacing + 30}, 'slow', function() {
							
							// $(this).prependTo('.clientList ul');
							//iconSlide();
							slideInProgress = false;
							// });
							jQueryLis.eq(0).css('left', 0+ 60).animate({'left':spacing + 60}, 'slow');
							jQueryLis.eq(1).css('left', spacing).animate({'left':spacing * 2 + 60}, 'slow');
							jQueryLis.eq(2).css('left', spacing * 2).animate({'left':spacing * 3 + 60}, 'slow');
							jQueryLis.eq(3).css('left', spacing * 3).animate({'left':spacing * 4 + 60}, 'slow');
							jQueryLis.eq(4).css('left', spacing * 4).animate({'left':60}, 'slow');
							//jQueryLis.eq(5).css('left', spacing * 5).animate({'left':spacing * 6}, 'slow');
							//jQueryLis.eq(6).css('left', spacing * 6).animate({'left':spacing * 7}, 'slow');
							//jQueryLis.eq(7).css('left', spacing * 7).animate({'left':spacing * 8}, 'slow');
							//event.preventDefault();
						}
					});
				};
				//iconSlide();
			});
		});

        
    $(function () {
		$("#clientsSlide").responsiveSlides({
			auto: false,
			pager: false,
			nav: true,
			speed: 500,
			maxwidth: 1024,
			prevText: "<<&nbsp;",
			nextText: "&nbsp;>>",
			namespace: "callbacks"
		}).bind({
			// Before callback
			"callbacks-before": function () {
			$('.events').append("<li>before event fired.</li>");
			},
			// After callback
			"callbacks-after": function () {
			$('.events').append("<li>after event fired.</li>");
			}
		});
		
		$("#menu_company").mouseenter(function(){
			$("#menu_company_sub").show();
		}).mouseleave(function(){
			$("#menu_company_sub").hide();
		});

		
		$(function () {
			$("#slide").responsiveSlides({
				auto: true,
				pager: true,
				nav: false,
				speed: 500,
				maxwidth: 1024,
				prevText: "<<&nbsp;",
				nextText: "&nbsp;>>",
				namespace: "callbacks"
			}).bind({
				// Before callback
				"callbacks-before": function () {
				$('.events').append("<li>before event fired.</li>");
				},
				// After callback
				"callbacks-after": function () {
				$('.events').append("<li>after event fired.</li>");
				}
			});
		});

	});

 	
//]]>
</script>
<?php get_footer(); ?>
